const box = document.querySelector('.container');
const imageWidth = 220;
const Ajax = {
    get: function (url, callback) {
        // XMLHttpRequest对象用于在后台与服务器交换数据
        let xhr = new XMLHttpRequest();
        xhr.open('GET', url, false);
        xhr.onreadystatechange = function () {
            // readyState == 4说明请求已完成
            if (xhr.readyState == 4) {
                if (xhr.status == 200 || xhr.status == 304) {
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    }
}
function createImages() {
    // Ajax.get('http://show.shuonihao.cn/api/v1/file/qiniu', (res) => {
    //     let result = JSON.parse(res).result;
    //     for (let i = 0; i < result.length; i++) {
    //         let image = document.createElement('img');
    //         // 有新的图片加入都更新一下位置
    //         image.onload = setPosition;
    //         image.src = 'http://resource.shuonihao.cn/' + result[i];
    //         box.appendChild(image);
    //     }
    // })
    for (let i = 1; i <= 44; i++) {
        let image = document.createElement('img');
        // 有新的图片加入都更新一下位置
        image.onload = setPosition;
        image.src = './assets/'+i+'.jpg';
        image.alt="图片"+i;
        box.appendChild(image);
    }
}
// 1.加载图片
createImages();

// 2.计算有多少列
function cal() {
    // 获取容器的宽度
    let containerWidth = box.clientWidth;
    // 计算列数
    let columns = Math.floor(containerWidth / imageWidth);
    // 计算间隙
    let spaceNumber = columns + 1;
    // 计算剩余空间
    let lastSpace = containerWidth - columns * imageWidth;
    // 计算每个间隙的空间
    let space = lastSpace / spaceNumber;
    return {
        space: space, columns: columns
    }
}
// 3.设置图片的位置
function setPosition() {
    // 得到列数和间隙
    let info = cal();
    // 按照列数设置数组,存放图片的纵坐标
    let nextTops = new Array(info.columns);
    // new的数组需要填充,这一步很关键
    nextTops.fill(0)
    // 遍历当前所有图片
    for (let i = 0; i < box.children.length; i++) {
        let img = box.children[i];
        // 找到列数数组中最短的那一列，把当前图片归列
        let minTop = Math.min.apply(null, nextTops);
        // 设置纵偏移
        img.style.top = minTop + 'px';
        // 重置此列的最小值
        let index = nextTops.indexOf(minTop)
        nextTops[index] += img.height + info.space;
        // 设置横偏移
        let left = (index + 1) * info.space + index * imageWidth;
        img.style.left = left + 'px';
    }
    // 给容器设置高度，防止容器坍塌
    let max = Math.max(...nextTops);
    box.style.height = max + 'px';
}

window.onload = setPosition;

// 页面尺寸变化重新计算（需要防抖处理）
let timerId = null;
window.onresize = function () {
    if (timerId) {
        clearTimeout(timerId);
    }
    timerId = setTimeout(setPosition, 200);
}